<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <Echart id="leftCenter" v-if="pageflag" :options="options" class="left_center_inner" ref="charts" height="240px" />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { graphic } from 'echarts';

export default {
  data() {
    return {
      options: {},
      tag: 1,
      countUserNumData: null,
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;

      if (Array.isArray(this.countUserNumData)) {
        let crrentData = [];
        if (this.tag % 3 == 1) {
          crrentData = this.countUserNumData.map((item) => ({
            dayDate: item.dayDate,
            waybillNum: item.waybillNum,
          }));
        } else if (this.tag % 3 == 2) {
          crrentData = this.countUserNumData.map((item) => ({
            dayDate: item.dayDate,
            freight: item.freight,
          }));
        } else {
          crrentData = this.countUserNumData.map((item) => ({
            dayDate: item.dayDate,
            waybillNum: item.waybillNum,
            freight: item.freight,
          }));
        }
        this.tag += 1;
        this.$nextTick(() => {
          this.init(crrentData);
        });
      } else {
        currentPOST('bigLLeft1').then((res) => {
          //只打印一次
          if (!this.timer) {
            console.log('货量统计', res);
          }
          if (res.success) {
            this.tag = 1;
            this.countUserNumData = res.data;
            this.$nextTick(() => {
              this.init(res.data);
            });
            this.switper();
          } else {
            this.pageflag = false;
            this.$Message({
              text: res.msg,
              type: 'warning',
            });
          }
        });
      }
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init(currentData) {
      let name = '进出口货值';
      let lineColor = '#5AC2DB';
      let areaColor = ['rgba(143, 210, 240, 0.53)', 'rgba(40, 84, 126, 0.14)'];
      // let axisData = ["2021年", "2022年", "2023年", "2024年"];
      let axisData = currentData.map((item) => item.dayDate);
      let seriesData = [
        currentData.map((item) => parseFloat(item.waybillNum)),
        currentData.map((item) => parseFloat(item.freight)),
      ];

      let maxCity1 =
        axisData[seriesData[0].indexOf(Math.max(...seriesData[0]))];
      let maxCity2 =
        axisData[seriesData[1].indexOf(Math.max(...seriesData[1]))];
      const options = {
        // backgroundColor: "#0F224C", //背景色
        grid: {
          top: '20%',
          left: '4%',
          right: '4%',
          bottom: '4%',
          containLabel: true,
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     lineStyle: {
        //       color: "rgba(255,255,255,0.7)",
        //     },
        //   },
        //   backgroundColor: "rgba(255,255,255,0.1)",
        //   padding: [5, 10],
        //   textStyle: {
        //     color: "rgb(255,255,255)",
        //   },
        // },
        legend: {
          // x: "center",
          // y: "25",
          top: '1%',
          left: '4%',
          icon: 'circle',
          itemWidth: 12,
          itemHeight: 12,
          // itemGap: 60,
          textStyle: legend.textStyle,
          data: ['票数(票)', '运费(亿)'],
        },
        xAxis: {
          type: 'category',
          data: axisData,
          // boundaryGap: false,
          boundaryGap: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, // 不显示下切线
          },
          axisLabel: xAxis.axisLabel,
          axisLine: {
            lineStyle: {
              background: 'rgba(176, 215, 255, 0.4)',
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            // max: 800,
            // min: 0,//
            axisLabel: yAxis.axisLabel,
            axisLine: {
              show: false,
              // interval: 1,
              lineStyle: {
                color: 'rgba(0,0,0,0.5)',
              },
            },
            splitLine: {
              show: true,
              // interval: 1,
              lineStyle: {
                color: ['rgba(176, 215, 255, 0.2)'],
                width: 1,
                type: 'dashed',
              },
            },
            // splitLine: {
            //   show: false,
            // },
            axisTick: {
              show: false,
            },
          },
          {
            min: 0,
            max: 100,
            interval: 20,
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4',
              },
            },

            axisLabel: {
              formatter: '{value}',
            },
          },
        ],
        series: [],
      };
      const series = [
        {
          name: '票数(票)',
          type: 'line',
          smooth: true,
          // showSymbol: false,
          symbol: 'circle',
          // showSymbol: true,
          // symbol: 'circle',
          data: seriesData[0],
          areaStyle: {
            color: colorsB[1],
          },
          itemStyle: {
            normal: {
              color: '#287CE8',
            },
          },
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          // markLine: {
          //   name: "aa",
          //   // symbol: ['image://' + arrowBj],
          //   symbolSize: [12, 6],
          //   lineStyle: {
          //     type: "dashed",
          //     color: "#287CE8",
          //   },
          //   data: [
          //     // axisData[seriesData[0].indexOf(Math.max(...seriesData[0]))]
          //     [
          //       {
          //         coord: [maxCity1, 0],
          //       },
          //       {
          //         coord: [
          //           maxCity1,
          //           Math.max(...seriesData[0]) > Math.max(...seriesData[1])
          //             ? Math.max(...seriesData[0])
          //             : Math.max(...seriesData[1]),
          //         ],
          //       },
          //     ],
          //   ],
          // },
          label: {
            show: true,
            position: 'top',
            formatter: (par) => {
              return par.value;
            },
            textStyle: { fontSize: 11, color: '#FFF' },
          },
          markPoint: {
            symbol: 'circle',
            symbolSize: [14, 14], // 容器大小
            symbolOffset: ['0%', '0%'],
            data: [
              {
                name: '最大值',
                type: 'max',
                valueIndex: 1,
              },
            ],
            label: {
              show: false,
              position: 'top',
              fontSize: 11,
              color: '#FFAB07',
            },
          },
        },
        {
          name: '运费(亿)',
          type: 'line',
          smooth: true,
          // showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: seriesData[1],
          itemStyle: {
            normal: {
              // color: "#38FFBA",
              color: 'rgba(0,219,254,1)',
            },
          },
          // areaStyle: {
          //   color: colorsA[0],
          // },
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          // markLine: {
          //   name: "aa",
          //   // symbol: ['image://' + arrowGz],
          //   symbolSize: [12, 6],
          //   lineStyle: {
          //     type: "dashed",
          //     color: "#287CE8",
          //   },
          //   data: [
          //     [
          //       {
          //         coord: [maxCity2, 0],
          //       },
          //       {
          //         coord: [
          //           maxCity2,
          //           Math.max(...seriesData[1]) > Math.max(...seriesData[0])
          //             ? Math.max(...seriesData[1])
          //             : Math.max(...seriesData[0]),
          //         ],
          //       },
          //     ],
          //   ],
          // },
          label: {
            show: true,
            position: 'top',
            formatter: (par) => {
              return par.value;
            },
            textStyle: { fontSize: 11, color: '#FFF' },
          },
          markPoint: {
            symbol: 'circle',
            symbolSize: [14, 14], // 容器大小
            symbolOffset: ['0%', '0%'],
            data: [
              {
                name: '最大值',
                type: 'max',
                valueIndex: 1,
              },
            ],
            label: {
              show: false,
              position: 'top',
              fontSize: 11,
              color: '#38FFBA',
            },
          },
          yAxisIndex: 1,
        },
      ];
      if (currentData.length) {
        const firstData = currentData[0];
        if (firstData.waybillNum && firstData.freight) {
          options.series = series;
        } else if (firstData.waybillNum) {
          options.series = series[0];
        } else if (firstData.freight) {
          options.series = series[1];
        }
      }
      this.options = options;
    },
  },
};
</script>
<style lang="scss" scoped></style>
